<div class="query-section">
  <div class="query-controls">
    <div class="query-item">
      <span class="query-label">截止日期：</span>
      <nz-date-picker 
        [(ngModel)]="cutoffDate" 
        nzFormat="yyyy-MM-dd"
        style="width: 200px;">
      </nz-date-picker>
    </div>
    <div class="query-buttons">
      <button nz-button nzType="default" (click)="onReset()">
        <span nz-icon nzType="undo" nzTheme="outline"></span>
        重置
      </button>
      <button nz-button nzType="primary" (click)="onQuery(false)" [nzLoading]="loading">
        <span nz-icon nzType="search" nzTheme="outline"></span>
        查询
      </button>
      <button nz-button nzType="default" (click)="onExport()" [nzLoading]="exporting" style="display: none;">
        <span nz-icon nzType="download" nzTheme="outline"></span>
        导出
      </button>
    </div>
  </div>
</div>
<nz-card class="main-card">
  <nz-table 
    #mainTable 
    nzSize="middle"
    [nzData]="dataList" 
    [nzLoading]="loading"
    [nzFrontPagination]="false"
    [nzTotal]="totalCount"
    [nzScroll]="{ x: '100%',y: '100%' }"
    [nzPageSize]="pageSize"
    [nzPageIndex]="pageIndex"
    [nzShowTotal]="totalTemplate"
    [nzPageSizeOptions]="[10, 20, 50, 100]"
    [nzShowSizeChanger]="true"
    (nzPageIndexChange)="onPageIndexChange($event)"
    (nzPageSizeChange)="onPageSizeChange($event)">
    <ng-template #totalTemplate let-total>共 {{ total }} 条数据</ng-template>
    <thead>
      <tr>
        <th nzLeft [nzWidth]="'60px'">序号</th>
        <th nzLeft [nzWidth]="'150px'">料号</th>
        <th nzLeft [nzWidth]="'200px'">料品名称</th>
        <th nzLeft [nzWidth]="'200px'">规格型号</th>
        <th [nzWidth]="'100px'">期初库存</th>
    
        <ng-container *ngFor="let date of getAllDates()">
          <th [nzWidth]="'300px'" [nzAlign]="'center'">
            <div class="date-header">{{ formatDate(date) }}</div>
            <div class="sub-headers">
              <div class="sub-header">日需求</div>
              <div class="sub-header">日供应</div>
              <div class="sub-header">剩余库存</div>
            </div>
          </th>
        </ng-container>
        
        <th [nzWidth]="'300px'" [nzAlign]="'center'">
          <div class="period-header within-period">期内</div>
          <div class="sub-headers">
            <div class="sub-header">总供应</div>
            <div class="sub-header">总需求</div>
            <div class="sub-header">现存量</div>
          </div>
        </th>
        
        <th [nzWidth]="'300px'" [nzAlign]="'center'">
          <div class="period-header out-of-period">期外</div>
          <div class="sub-headers">
            <div class="sub-header">总供应</div>
            <div class="sub-header">总需求</div>
            <div class="sub-header">现存量</div>
          </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let material of mainTable.data; let i = index" 
          (click)="onSelectMaterial(material, i)"
          [class.selected-row]="selectedMaterialIndex === i"
          style="cursor: pointer;">
        <td nzLeft>{{ i + 1 }}</td>
        <td nzLeft>{{ material.itemCode }}</td>
        <td nzLeft>{{ material.itemName }}</td>
        <td nzLeft>{{ material.itemSpec }}</td>
        <td>{{ material.initialStock }}</td>
        
        <ng-container *ngFor="let date of getAllDates()">
          <td>
            <ng-container *ngIf="getDailyData(material, date) as daily; else emptyDaily">
              <div class="daily-data">
                <div class="daily-cell" [class.shortage]="daily.isShortage">{{ daily.demandQuantity || 0 }}</div>
                <div class="daily-cell">{{ daily.supplyQuantity || 0 }}</div>
                <div class="daily-cell" [class.shortage]="daily.isShortage">{{ daily.projectedEndingStock || 0 }}</div>
              </div>
            </ng-container>
            <ng-template #emptyDaily>
              <div class="daily-data">
                <div class="daily-cell">0</div>
                <div class="daily-cell">0</div>
                <div class="daily-cell">0</div>
              </div>
            </ng-template>
          </td>
        </ng-container>

        <td>
          <ng-container *ngIf="getWithinPeriodData(material) as withinPeriod">
            <div class="daily-data within-period-data">
              <div class="daily-cell">{{ withinPeriod.withinPeriodTotalSupply }}</div>
              <div class="daily-cell">{{ withinPeriod.withinPeriodTotalDemand }}</div>
              <div class="daily-cell" [class.shortage]="withinPeriod.isShortage">
                {{ withinPeriod.withinPeriodStock }}
              </div>
            </div>
          </ng-container>
        </td>
        
        <td>
          <ng-container *ngIf="getOutOfPeriodData(material) as outOfPeriod">
            <div class="daily-data out-of-period-data">
              <div class="daily-cell">{{ outOfPeriod.outOfPeriodTotalSupply }}</div>
              <div class="daily-cell">{{ outOfPeriod.outOfPeriodTotalDemand }}</div>
              <div class="daily-cell" [class.shortage]="outOfPeriod.isShortage">
                {{ outOfPeriod.outOfPeriodStock }}
              </div>
            </div>
          </ng-container>
        </td>
      </tr>
    </tbody>
  </nz-table>
</nz-card> 
<div class="detail-section">
  <div  *ngIf="selectedMaterial" class="detail-header">
    <h3>料品供需详情 - {{ selectedMaterial.itemName }}</h3>
    <div class="detail-stats">
      <div class="stat-item">
        <span class="stat-label">期初库存:</span>
        <span class="stat-value">{{ selectedMaterial.initialStock }}</span>
      </div>
      <div class="stat-item">
        <span class="stat-label">期内总需求:</span>
        <span class="stat-value">{{ selectedMaterial.withinPeriodTotalDemand }}</span>
      </div>
      <div class="stat-item">
        <span class="stat-label">期内总供应:</span>
        <span class="stat-value">{{ selectedMaterial.withinPeriodTotalSupply }}</span>
      </div>
      <div class="stat-item">
        <span class="stat-label">期内结存:</span>
        <span class="stat-value" [class.shortage]="selectedMaterial.withinPeriodStock < 0">
          {{ selectedMaterial.withinPeriodStock }}
        </span>
      </div>
      <div class="stat-item">
        <span class="stat-label">期内缺料:</span>
        <nz-tag [nzColor]="selectedMaterial.isWithinPeriodShortage ? 'red' : 'green'">
          {{ selectedMaterial.isWithinPeriodShortage ? '是' : '否' }}
        </nz-tag>
      </div>
      <div class="stat-item">
        <span class="stat-label">期外缺料:</span>
        <nz-tag [nzColor]="selectedMaterial.isOutOfPeriodShortage ? 'orange' : 'green'">
          {{ selectedMaterial.isOutOfPeriodShortage ? '是' : '否' }}
        </nz-tag>
      </div>
    </div>
  </div>

  <nz-card *ngIf="selectedMaterial" class="detail-card">
    <nz-table 
      #detailTable 
      nzSize="middle"
      [nzData]="selectedMaterial.supplyDemandRecords || []" 
      [nzFrontPagination]="true"
      [nzScroll]="{ x: '100%',y: '100%' }"
      [nzPageSize]="100"
      [nzPageSizeOptions]="[50, 100, 500]"
      [nzShowSizeChanger]="true"
      [nzShowTotal]="detailTotalTemplate">
      <ng-template #detailTotalTemplate let-total>共 {{ total }} 条供需记录</ng-template>
      <thead>
        <tr>
          <th [nzWidth]="'60px'">序号</th>
          <th [nzWidth]="'100px'">类型</th>
          <th [nzWidth]="'180px'">单据号</th>
          <th [nzWidth]="'120px'">单据类型</th>
          <th [nzWidth]="'120px'">业务日期</th>
          <th [nzWidth]="'150px'">料号</th>
          <th [nzWidth]="'200px'">料品名称</th>
          <th [nzWidth]="'200px'">规格型号</th>
          <th [nzWidth]="'100px'">数量</th>
          <th [nzWidth]="'120px'">已完成数量</th>
          <th [nzWidth]="'120px'">未完成数量</th>
          <th [nzWidth]="'100px'">单据状态</th>
          <th [nzWidth]="'150px'">番号</th>
          <th [nzWidth]="'150px'">需求编号</th>
          <th [nzWidth]="'200px'">备注</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let record of detailTable.data; let i = index"
            [class.demand-row]="record.type === 0"
            [class.supply-row]="record.type === 1">
          <td>{{ i + 1 }}</td>
          <td>
            <nz-tag [nzColor]="record.type === 1 ? 'green' : 'orange'">
              {{ getSupplyDemandTypeText(record.type) }}
            </nz-tag>
          </td>
          <td>{{ record.docNo }}</td>
          <td>{{ record.docTypeName }}</td>
          <td>{{ formatDate(record.businessDate) }}</td>
          <td>{{ record.itemCode }}</td>
          <td>{{ record.itemName }}</td>
          <td>{{ record.itemSpec }}</td>
          <td>{{ record.quantity }}</td>
          <td>{{ record.completedQuantity }}</td>
          <td>{{ record.pendingQuantity }}</td>
          <td>{{ record.status }}</td>
          <td>{{ record.seiban }}</td>
          <td>{{ record.demandCode }}</td>
          <td>{{ record.remark }}</td>
        </tr>
      </tbody>
    </nz-table>
  </nz-card>  
</div>
